<template>
    <div id="changePwd">
        <app-header></app-header>
        <div class="changePwd">
           <div class="setting-title">
                <h1>账户设置-修改密码</h1>
            </div>
            <div class="userMsg">
                <form action="" enctype="multipart/form-data">
                    <div class="fromList">
                        <div class="phone">
                            <input type="text" v-model="phone">
                        </div>
                        <div class="QRcode_div clearfix">
                            <input type="text" placeholder="图形验证码" class="QR_code lf" v-model="imgCaptcha">
                            <div class="graphic gt" v-on:click="captcha" v-html="imgCap"></div>
                        </div>
                        <div class="note">
                            <input type="text" placeholder="短信验证码" class="note_code lf" v-model="smsCaptcha">
                            <div class="checkCode gt" v-on:click="checkCode">查看验证码</div>
                            <div class="verification gt" v-on:click="note_code">获取验证码</div>
                        </div>
                        <input type="password" placeholder="密码（请输入6~20位字符）" class="pwd" v-model="password">
                        <input type="password" placeholder="确认密码" class="confirmPwd" v-model="password2">
                        <div class="changeBtn" v-on:click="changeBtn">完成</div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</template>
<script>
import Header from "./blueheader";
import {getImgCaptcha,resetSmsCaptcha,reset_text,resetPwd} from '../api/example'
export default {
    name:'changePwd',
    components:{
        "app-header": Header,
    },
    data(){
        return{
            phone:localStorage.newsPhone,
            imgCaptcha:"",//用户输入的图文验证码
            smsCaptcha:"",//用户输入的短信验证码
            password:"",
            password2:"",
            imgCap:"获取图形验证码", //图形码显示区域
        }
    },
    methods:{
        // 获取图文验证码
        captcha:function(){
            var vm=this;
            getImgCaptcha().then(res => {        
                vm.imgCap=res.data
            })
            .catch(err => {
                console.log(err)
            })
        },
        // 获取短信验证码
        note_code:function(){
            var vm=this;
            resetSmsCaptcha(vm.phone,vm.imgCaptcha).then(res => {
                if(res.data.code === 'success'){
                console.log(res.data);
                alert("点击右侧按钮查看验证码")
                }else{
                alert("点击右侧按钮查看验证码")
                }
            })
            .catch(err => {
                //捕获错误
                console.log(err)
            })
        },
        // 查看短信验证码
        checkCode:function(){
            var vm=this;
            reset_text(vm.phone).then(res => {
                if(res.data.code === 'success'){
                    console.log(res.data.smsCaptcha);
                    alert(res.data.data.smsCaptcha)
                }else{
                    alert(res.data.data.smsCaptcha)
                }          
            })
            .catch(err => {
                //捕获错误
                console.log(err)
            })
        },
        changeBtn(){
            resetPwd(this.phone,this.smsCaptcha,this.password).then(res =>{
                if(res.data.code === 'success'){
                    console.log(res.data)
                    alert(res.data.message);
                    localStorage.clear();
                    this.$router.push({
                        name: "login"
                    });
                }else{
                    alert(res.data.message);
                }
            })
        }
    }

}
</script>
<style scoped>
    #changePwd{
        background: #f9f9f9;
    }
    .changePwd{
         width:1032px;
        margin-top:83.2px;
        background: #fff;
        box-shadow: 2px 2px 4px 0 rgba(0,0,0,0.11);
    }
    .setting-title{
        padding:23.5px 0;
        border-bottom: 1px solid #DCDCDC;
    }
    .changePwd h1{
        font-size: 20px;
        color: #333333;
        padding-left:31px;
        border-left:5px solid #0074FF;
        font-weight: bold;
    }

    
    .fromList{
        width:377.8px;
        margin-top: 58px;
        font-size: 16px;
        color:#333;
        padding-bottom:100px;
    }    
    .fromList input{
        width:380px;
        height:56px;
        line-height: 56px;
        font-size: 16px;
        color: #9B9B9B;
        border: 1px solid #DCDCDC;
        border-radius: 2px;
        padding-left: 20.2px;
        margin-bottom: 18px;
    }
    .QRcode_div input{
        width:228px;
    }
    .note input{
        width:174px;
    }
     .graphic,.verification,.checkCode{
        margin-left:9px;
        width:90px;
        display: inline-block;
        height: 54.7px;
        line-height: 54.7px;
        text-align: center;
        cursor: pointer;
        background: #FF8000;
        font-size: 16px;
        color:#fff;
    }
    .graphic{
        width:139.8px;
        background: #f5f5f5;
        color:#FF8000;
    }
    .graphic svg{
        width:100%;
        height:100%;
        padding-left: 34px;
    }
    .changeBtn{
        margin:24.3px 0 39.7px;
        background: #FF8000;
        height:53px;
        line-height: 53px;
        text-align:center;
        font-size: 20px;
        color: #FFFFFF;
        cursor: pointer;
    }
</style>
